<!--  -->
<template>
<div class="article_wrapBox">
  <div class="article_detail markdown-body">
    <div class="header">
      <h2>{{detail.title}}</h2>
      <div class="info">
        <span>
          <i class="el-icon-alarm-clock"></i> {{detail.created_time}}
        </span>
        <span>分类：{{detail.catalog}}</span>
        <span>
          <i class="el-icon-view"></i> {{detail.views}}
        </span>
        <span>
          <i class="el-icon-chat-dot-round"></i> {{detail.comments}}
        </span>
      </div>
    </div>
    <div class="article_content" v-html="detail.html"></div>
  </div>
  <!-- 评论 -->
  <comment></comment> 
</div>
</template>

<script>
import {formatDateTime} from "@/tools/publicMethods"
import { getArticleById } from "@/api/article"
import Comment from "../comment"
export default {
  data() {
    return {
        detail:{}
    };
  },
  components:{
    Comment
  },
  created() {
    this.getArticleDetail();
  },
  methods: {
    async getArticleDetail() {
      let id = this.$route.params.id;
      await getArticleById(id).then(res => {
        res.detail.created_time = formatDateTime(res.detail.created_time);
        this.detail = res.detail;
      });
    }
  },
  mounted() {}
};
</script>

<style lang='stylus' scoped>
@import "../../assets/css/markdown.css"
.article_detail {
  background: #fff;
  border-radius: 5px;
  padding: 10px;

  .header {
    text-align: center;

    h2 {
      padding: 10px 0;
      font-size: 20px;
      font-weight: normal;
      color: #666;
    }

    .info {
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #e9eaed;
      color: #999;

      span {
        padding: 0 7px;
      }
    }
  }
}
</style>